<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">
      请添加
    </div>
    <div class="panel-body">
      <form id="form1" class="form-horizontal" enctype="multipart/form-data" role="form">
        <div class="form-group has-feedback">
          <label class="col-sm-3 control-label" for="name">商品名称：</label>
          <div class="col-sm-9 require">
            <input type="text" class="form-control" id="name" name="name">
          </div>
        </div>
        <div class="form-group has-feedback">
          <label class="col-sm-3 control-label" for="jianjie">简介：</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" name="jianjie" id="jianjie">
          </div>
        </div>
        <div class="form-group has-feedback">
          <label class="col-sm-3 control-label" for="money">单价：</label>
          <div class="col-sm-9 require">
            <input pattern="\d{1,5}(\.\d{1,2})?" class="form-control" id="money" name="money" required>
          </div>
        </div>
        <div class="form-group has-feedback">
          <label class="col-sm-3 control-label" for="img">图片：</label>
          <div class="col-sm-9 require">
            <input type="file" class="form-control" id="img" name="img">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-3 col-sm-offset-3">
            <button class="btn btn-default submit">添加</button>
          </div>
          <div class="col-sm-6">
            <button type="reset" class="btn btn-default reset">重置</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <table class="table table-bordered text-center">
    <caption>商品数据显示与编辑</caption>
    <thead>
    <tr>
      <th>商品名称</th>
      <th>简介</th>
      <th> 单价</th>
      <th>操作</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
  </table>


</div>



<div class="modal" id="edit" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span
            aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">请修改数据</h4>
      </div>
      <div class="modal-body">
        <div class="panel panel-primary">
          <div class="panel-body">
            <form class="form-horizontal" role="form" enctype="multipart/form-data" id="form2">
              <div class="form-group has-feedback">
                <label class="col-sm-3 control-label" for="title1">商品名称：</label>
                <div class="col-sm-9">
                  <input type="hidden" id="id1" name="id">
                  <input type="text" class="form-control" name="name" id="name1"
                         pattern="\S.+\S" required>
                </div>
              </div>
              <div class="form-group has-feedback">
                <label class="col-sm-3 control-label" for="jianjie1">搜索关键词：</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" name="jianjie" id="jianjie1">
                </div>
              </div>
              <div class="form-group has-feedback">
                <label class="col-sm-3 control-label" for="money1">商品单价：</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" name="money" id="money1"
                         pattern="\d{1,5}(\.\d{1,2})?" required>
                </div>
              </div>
              <div class="form-group has-feedback">
                <label class="col-sm-3 control-label">原图片：</label>
                <div class="col-sm-9 require">
                  <input type="hidden" id="old_src" name="old_src">
                  <img id="old_img" src="" style="width: 100%">
                </div>
              </div>
              <div class="form-group has-feedback">
                <label class="col-sm-3 control-label" for="new_src">新图片：</label>
                <div class="col-sm-9 require">
                  <input type="hidden" name="MAX_FILE_SIZE" value="2000000">
                  <input type="file" class="form-control" name="new_src" id="new_src">
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-3 col-sm-offset-3">
                  <button class="btn btn-default submit">修改</button>
                </div>
                <div class="col-sm-6">
                  <button type="reset" class="btn btn-default reset">重置</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<script>
  $('#form1').submit(function (e) {
    e.preventDefault();
    var form_data = new FormData(this);
    $.ajax({
      url: "/manage/insert",
      type: "post",
      data: form_data,
      dataType: "json",
      cache: false,
      contentType: false,
      processData: false,
      success: function (flag, textStatus) {
        console.log(flag)
        if (flag == 1) {
          alert("数据添加成功");
          show(0);
        } else if (flag == 2) {
          alert("图片格式不符合要求")
        }
      },
      error: function () {
        alert("数据请求失败，请检查网络等！")
      }
    });
  })

  function show() {
    $('#tbody').empty();
    $.getJSON('/manage/get_page', function (data) {
      $.each(data.arr, function () {
        $('#tbody').append("<tr data-idsrc='" + this.id + '&' +this.img + "'><td>" + this.name + "</td><td>"
          + this.jianjie + "</td><td>" + this.money + "</td><td><button class='del'>删除</button></td><td>" +
          "<button class='edit' data-toggle='modal'" +
          " data-target='#edit'>编辑</button></td></tr>")
      })
    });
  }
  show();


  $('#tbody').on('click', 'button', function () {
    var clsn = this.className;
    var idsrc = $(this).closest('tr').data('idsrc');
    var id = idsrc.split('&')[0];
    var src = idsrc.split('&')[1];
    if (clsn == 'del') {
      if (confirm('你确定要删除吗')) {
        $.getJSON('/manage/delete?id=' + id + "&img=" + src, function (flag) {
          if(flag==1)alert('删除成功');
          show()
        })
      }
    }
    else {
      $.getJSON('/manage/get_one?id=' + id, function (row) {
        $('#id1').val(row.id);
        $('#name1').val(row.name);
        $('#jianjie1').val(row.jianjie);
        $('#money1').val(row.money);
        $('#old_img').attr('src', "../uplods/"+row.img);
        $('#old_src').val(row.img);
      })
    }


  })


  $('#form2').submit(function (e) {
    e.preventDefault();
    var form_data = new FormData(this);
    $.ajax({
      url: '/manage/change',
      data: form_data,
      type: 'post',
      dataType: 'json',
      cache: false,
      processData: false,
      contentType: false,
      success: function (flag) {
        if(flag==1){
          alert('修改成功');
          show();
        }else if(flag==2){
          alert('图片格式不对');
        }else if(flag==3){
          alert('数据没有更新')
        }
      },
      error: function () {
        alert("数据提交失败")
      }
    })
  })
</script>
